<template>
    <div>
        <button v-if="show" v-append-text="`hello ${number}`" @click="number++">按钮</button>
        <button @click="show=!show">销毁</button>
    </div>
</template>

<script>
    export default {
        name: 'CustomerDirectives',
        directives: {
            appendText: { 
                bind() {
                  console.log('bind');
                },
                inserted(el,bind) {
                    // console.log(el,binding,vnode);
                    // console.log('inserted');
                    // 插入节点
                    el.appendChild(document.createTextNode(bind.value))
                },
                update() {
                    console.log('update');
                },
                componentUpdated(el,bind) {
                    console.log('componentUpdated');
                     // 当更新的时候 移除原节点 新增新的节点
                    el.removeChild(el.childNodes[el.childNodes.length-1])
                    el.appendChild(document.createTextNode(bind.value))
                },
                unbind() {
                    // 销毁的时候调用unbind生命周期
                    console.log('unbind');
                }
            }
        },
         data() {
            return {
                number: 0,
                show: true
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>